import { Button, Table, Tag } from "antd";
import { EditableCell, EditableRow } from "@/components/Editable";
import React, { useEffect, useMemo, useState } from "react";
import DIalog from "@/components/DIalog";
import TableDesc from "./TableDesc";
import { staffRules } from "@/utils/rules/staffRules";
import IconMap from "@/components/IconMap";
import { useDispatch } from "umi";

const TableList = ({ pageSize, current, dataSource, setDataSource }: any) => {
  const dispatch = useDispatch();
  const [dialogStatus, setDialogStatus] = useState(false);
  const [currentRecord, setCurrentRecord] = useState<any>({});

  //   console.log(current);
  const dataPageSize = useMemo(() => {
    return dataSource.slice((current - 1) * pageSize, current * pageSize);
  }, [pageSize, current, dataSource]);

  function onReview(record: { title: string; type: string }) {
    console.log(record);
    setCurrentRecord(record);
    setDialogStatus(true);
  }
  function onDetailReview(record: any) {
    console.log(record, "onDetailReview");
    dispatch({ type: "common/toggleDetail", payload: true });
    dispatch({ type: "staff/setDetailData", payload: record });
  }

  //这个也可以抽离出去，做成一个ts文件
  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      width: "200px",
      editable: true,
      render: (text: string, record: any) => {
        return (
          <div className="flex items-center   justify-between">
            <span>{text}</span>

            <span
              className="cursor-pointer hover:text-blue-500"
              onClick={(e) => {
                e.stopPropagation();
                onDetailReview({ title: "员工详情", col: "name", ...record });
              }}
            >
              {IconMap.EditOutlined}
            </span>
          </div>
        );
      },
    },
    {
      title: "年龄",
      dataIndex: "age",
    },
    {
      title: "手机号",
      dataIndex: "phone",
      render: (text: string, record: any) => {
        return (
          <span
            className="cursor-pointer hover:text-blue-500"
            onClick={(e) => {
              e.stopPropagation();
              onDetailReview({
                title: "手机号码详情",
                col: "phone",
                ...record,
              });
            }}
          >
            {text}
          </span>
        );
      },
    },
    {
      title: "级别",
      dataIndex: "level",
    },
    {
      title: "性别",
      dataIndex: "sex",
      render: (text: string) => {
        return <Tag>{text === "男" ? "♂" : "♀"}</Tag>;
      },
      editable: true,
    },
    {
      title: "入职时间",
      dataIndex: "entryTime",
      editable: true,
    },
    {
      title: "部门",
      dataIndex: "department",
      render: (text: string) => {
        return (
          <Tag
            onClick={() => onReview({ title: "入职时间", type: "staff" })}
            className="cursor-pointer"
          >
            {text}
          </Tag>
        );
      },
    },
    {
      title: "工龄",
      dataIndex: "workAge",
    },
    //多加几列随机
    {
      title: "员工资料",
      dataIndex: "action",
      render: (text: string, record: any) => {
        return (
          <Button
            type="primary"
            onClick={() =>
              onReview({
                title: "员工详情",
                type: "users",
              })
            }
          >
            查看
          </Button>
        );
      },
    },
    {
      title: "随机列2",
      dataIndex: "randomColumn2",
      render: (text: string) => {
        return <Tag>{text}</Tag>;
      },
    },
    {
      title: "随机列3",
      dataIndex: "randomColumn3",
      render: (text: string) => {
        return <Tag>{text}</Tag>;
      },
    },
    {
      title: "随机列4",
      dataIndex: "randomColumn4",
      render: (text: string) => {
        return <Tag>{text}</Tag>;
      },
    },
    {
      title: "随机列5",
      dataIndex: "randomColumn5",
      render: (text: string) => {
        return <Tag>{text}</Tag>;
      },
    },
    {
      title: "随机列6",
      dataIndex: "randomColumn",
      render: (text: string) => {
        return <Tag>{text}</Tag>;
      },
    },
    {
      title: "随机列8",
      dataIndex: "randomColumn8",
      render: (text: string) => {
        return <Tag>{text}</Tag>;
      },
    },
  ];

  const components = {
    body: {
      row: EditableRow,
      cell: EditableCell,
    },
  };

  function handleSave(record: any) {
    let data = dataSource.map((item: any) => {
      if (item.key === record.key) {
        return record;
      }
      return item;
    });
    setDataSource(data);
  }

  const columnsNew = columns.map((col) => {
    if (!col.editable) {
      return col;
    }
    let type = "";
    if (col.dataIndex === "name") {
      type = "Input";
    } else if (col.dataIndex === "age") {
      type = "InputNumber";
    } else if (col.dataIndex === "phone") {
      type = "Input";
    } else if (col.dataIndex === "level") {
      type = "sex";
    } else if (col.dataIndex === "sex") {
      type = "Select";
    } else if (col.dataIndex === "entryTime") {
      type = "DatePicker";
    }
    //可编辑的列的规则
    return {
      ...col,
      onCell: (record: any) => ({
        record,
        type,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        rules: staffRules[col.dataIndex as keyof typeof staffRules] || [],
        handleSave,
      }),
    };
  });
  return (
    <>
      <Table
        components={components}
        rowClassName={() => "editable-row"}
        bordered
        scroll={{ x: "max-content", y: "calc(100vh - 9rem)" }}
        dataSource={dataPageSize}
        columns={columnsNew}
        pagination={false}
      />
      <DIalog
        render={() => <TableDesc type={currentRecord.type} />}
        title={currentRecord.title}
        dialogStatus={dialogStatus}
        setDialogStatus={setDialogStatus}
        width={600}
      />
    </>
  );
};

export default TableList;
